import React from "react";
import { url, playlistcatlist,topplaylist } from "../../api/index";
import { axiosGet } from "../../axios";
import dealWithData from "../../utils/get-common-type";
import {inject,observer} from 'mobx-react'

@inject('songlist')@observer
class SongListHot extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hotTags: [],
      curStyle:[]
    };
  }
  componentDidMount() {
    this.gethotTags();
  }
  //  获取热门标签
  gethotTags() {
    axiosGet(url, playlistcatlist).then((data) => {
      let hotTag = [];
      hotTag = dealWithData(data.sub, "hot");
      if (hotTag[0]["attribute"] === true) {
        hotTag = hotTag[0].allData;
      } else {
        hotTag = hotTag[1].allData;
      }
      this.setState({
        hotTags: hotTag,
      });
    });
  }

  //  重新设置tag获取数据、设置被选中样式
  setTag(e){
    window.scrollTo(0, 0);
    let isStyle = {}
    for(let i=0;i<this.state.hotTags.length; i++){
      isStyle[this.state.hotTags[i].name] = false
    
    }
    let val = e.target.innerHTML
    isStyle[val] = false
    for(let i=0;i<this.state.hotTags.length; i++){
      isStyle[val] = true
    }
    this.setState({
      curStyle:isStyle
    })
    this.props.songlist.setTag(val) 
    axiosGet(url, topplaylist,"limit=200",'cat='+val).then((data) => {
      this.props.songlist.setSonglist(data.playlists)
    });
  }
  //  渲染
  render() {
    return (
      <div className="hot-tags">
        <div className="title">热门标签：</div>
        <ul className="tags">
          {this.state.hotTags &&
            this.state.hotTags.map((item, index) => {
              return (
                <li key={index} className="item">
                  <span key={index} onClick={(e)=>{this.setTag(e)}} className={this.state.curStyle[item.name]===true ?"active":null}>{item.name}</span>
                </li>
              );
            })}
        </ul>
      </div>
    );
  }
}

export default SongListHot